
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<style>
		#a:{
			color: blue;
			background: gray;
		}
	</style> 
	 <script src="http://code.jquery.com/jquery-latest.js"></script>
	<title></title>
</head>
<body>

<div id="a">慕课网</div>
<button id="addCSSRule">增加背景颜色</button>
<button id="removeCSSRule">移除颜色</button>

<script type="text/javascript">
	
function addCSSRule(key, value) {
	var css = document.styleSheets[document.styleSheets.length - 1];
	css.cssRules ?
		(css.insertRule(key + "{" + value + "}", css.cssRules.length)) :
		(css.addRule(key, value));
}

function removeCSSRule(key) {
	for (var i = 0; i < document.styleSheets.length; i++) {
		var css = document.styleSheets[i];
		css.cssRules ?
			(function() {
				for (var j = 0; j < css.cssRules.length; j++) {
					if (css.cssRules[j].selectorText == key) {
						css.deleteRule(j);
					}
				}
			})() :
			(css.removeRule(key));
	}
}


$("#addCSSRule").click(function(){
	addCSSRule("#a","color:red;background:yellow")
})

$("#removeCSSRule").click(function(){
	removeCSSRule("#a")
})

</script>
</body>
</html>